<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/React/react.devlopment.js"></script>
    <script src="./lib/React/react-dom.development.js"></script>
    <!-- 引入 Babel 转码器 -->
    <script src="./lib/babel.min.js"></script>
    <style>

        .ad {
            height: 40px;
            background-color: rgb(5, 66, 127);
            color: #fff;
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 0;
        }

    </style>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">

        // 需求： 页面会有广告，是会员则不会显示，不是则显示


        // 1. 条件渲染
        let flag = true;

        // 方式1
        // let vNode;
        // // 2. 创建虚拟dom
        // if(!flag) {
        //     vNode = <div className="ad">
        //             <p>欢迎来到卡塔尔世界杯!</p>
        //         </div>
        // }

        // 方式2 - 三目运算符
        // const vNode = !flag ? <div className="ad"><p>欢迎来到卡塔尔世界杯</p></div> : undefined;

        // 3. 指定渲染的容器
        ReactDOM.render(
            // 短路运算符  && 运算符
            // 前面的隐式转换后为true，得看后面的
            // 前面的隐式转换后为false，则直接返回前面的
            // 对比要做隐式转换，返回的话直接返回原值
            // 如果内容是在虚拟节点以内，则一定要写在输出表达式以内
            // 如果直接判断，则不需要写输出表达式

            // 方式3
            <div>{ !flag && <div className="ad"><p>欢迎来到卡塔尔世界杯</p></div> }</div>,
            document.querySelector('#app')
        )


    </script>
</body>
</html>